<template>
  <div>
    <div class="header">
        <h1>
            {{userRegion}}应急大数据可视化系统
            <span>
                v1.0.7
            </span>
        </h1>
      <div class="navs" >
        <div class="navItem" 
          v-for='(item,index) in list' 
          :key="index" 
          @click="toLink(item.router,index)"
          :class="{'active':currentIndex==index}"
        >
        {{item.name}}
        <div class=""> 
        </div>
        </div>
      </div>
      <div class="rightTime" >
        <div class="time">
          <div>{{year}}</div>
          <div class="timeWeek">
                <div>{{time}}</div>
                <div @click="getCenter">{{week}}</div>
          </div>
        </div>
        
        <div class="user">
            <div :title="userName">
                <span class="nameContent">
                    {{userName}}
                </span>
                
                <!-- <el-icon color="#fff">
                    <Edit />
                </el-icon> -->
                <!-- <el-svg-icon>
                    <reading />
                </el-svg-icon> -->
            </div>
            <div :title="userDepart">{{userDepart}}</div>
            
        </div>
        <i class="el-icon-reading" title="用户手册" @click="getUserBook"></i>
        <div class="offSysterm el-icon-switch-button" @click="loginOut"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted,ref, watch,computed } from 'vue'
import { Edit } from '@element-plus/icons'
import { useRouter,useRoute } from 'vue-router'
import {useStore} from "vuex"
import axios from "axios"
export default {
    components:{
        Edit
    },
    setup(){
        let currentIndex = ref(-1);
        const store =  useStore();
        // 获取路由器实例
        // 两点：危险化学品，琼州海峡水上交通(AIS船)
        // 一面：道路交通（公路铁路网）
        const router = useRouter()
        // route是响应式对象,可监控器变化
        const route = useRoute();
        const list = [
            {name: '海南概况',router :'hngk'},
            // {name: '监测预警',router :'jcyj'},
            {name: '数据中心',router :'sjzx'},
            {name: '风险防控',router :'fxfk'},
            {name: '应急资源',router :'yjzy'},
        ];
        function toLink(ly,index){
            router.push({name:ly})
            currentIndex.value = index
        }
        watch(() => route.name,(name) => {
                switch(name) {
                    //海南概况
                    case "hngk":
                        currentIndex.value = 0
                        break;
                    //数据中心
                    case "sjzx":
                        currentIndex.value = 1
                        break;
                    //风险防控
                    case "fxfk":
                        currentIndex.value = 2
                        break;
                    // 智慧救援
                    case "yjzy":
                        currentIndex.value = 3
                        break;
                    //智慧救援
                    // case "zhjy":
                    //     currentIndex.value = 3
                    //     break;
                } 
            },{
                immediate:true
            }
        );
        function getCenter(){
            console.log(layerManager.getCenter())
        }
        function timeToString(nowTime) {
            if (nowTime < 10) {
                return '0' + nowTime
            } else {
                return '' + nowTime
            }
        }
        let time = ref(null);
        let year = ref(null);
        let week = ref(null);
        function getTime(){
            setInterval(() => {
                const date = new Date()
                const hour = date.getHours()
                const minute = date.getMinutes()
                const second = date.getSeconds()
                const month = date.getMonth() + 1
                const today = date.getDate()
                time.value = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second)
                year.value = date.getFullYear() + '年' + timeToString(month) + '月' + timeToString(today) + "日"
                //const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                week.value = weekday[date.getDay()]
            }, 1000)
        }
        const loginOut = ()=>{
            try{
                axios.get(`${sjzxUrl}/api/jwtLogout`).then((res)=>{
                })
            }catch(error){
            }
            localStorage.removeItem('Authorization')
            localStorage.removeItem('userDepart')
            localStorage.removeItem('userName')
            localStorage.removeItem('userRegion')
            router.push({name:'login'})
            
        }
        const userName = computed(()=>{return store.state.userName})
        const userDepart = computed(()=>{return store.state.userDepart})
        const userRegion = computed(()=>{return store.state.userRegion})
        //store.commit("changeRegion")
        onMounted(()=>{
            getTime()
        })
        const getUserBook = ()=>{
            let a = document.createElement('a');
            console.log(`${sjzxUrl}/api/user-guide/preview?download=false`)
            a.href = `${sjzxUrl}/api/user-guide/preview?download=false`;
            a.target="_blank"   
            a.click();
        }
        return {
            list,
            toLink,
            time,
            year,
            week,
            getTime,
            getCenter,
            currentIndex,
            loginOut,
            userName,
            userDepart,
            userRegion,
            getUserBook
        }
    }
}
</script>
<style lang="stylus" scoped>

@media (max-width: 2880px)  
  .bgColor
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    display:flex
    div:nth-child(1)
      flex:1
      //background:linear-gradient(to bottom right, rgba(0,0,0,.7) 10%, rgba(0,0,0,0))
      //background:#000
    div:nth-child(2)
      flex:1
      //background:linear-gradient(to bottom left, rgba(0,0,0,.7) 10%, rgba(0,0,0,0))
      //background:#000
      
  .header
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    color:#fff
    cursor: pointer
    display: flex
    justify-content :space-between
    //background:url('/data/images/header/top.png') right top no-repeat, linear-gradient(to bottom right, rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
    background:url('/data/images/header/top1.png') right top no-repeat
    background-size: 100%
    h1
        font-family: PingFangSC-Semibold, sans-serif;
        font-size:vw(30);
        line-height:vh(114);
        width:fit-content;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        color:#01C7FF;
        letter-spacing : vw(3)
        span 
            font-size:vw(10);
            position:absolute;
            right:vw(-51);
            top:vh(15);
            color:#757575;
            letter-spacing : vw(3)
    .navs
      display:flex
      margin-left:vw(24)
      margin-top:vh(48)
      font-size:vw(15)
      .navItem
        margin-right:vw(15)
        width: vw(89)
        height: vh(37)
        line-height: vh(37)
        letter-spacing : vw(2)
        text-align: center
        background:url("/data/images/header/active.png")  no-repeat
        background-size :100% 100%
      .active
        background:url("/data/images/header/bg.png")  no-repeat
        background-size :100% 100%
    .rightTime
        display:flex;
        margin-top:vh(24)
        margin-right: vw(15)
        font-size:vw(20)
        div 
            color: #00E5FD
            margin-left:vw(8)
        div.user
            width:vw(150)
            position:relative
            div
                color:#00E5FD
                height:vh(25)
                line-height:vh(25)
                font-size:vw(15)
                ellipsis()
                span.nameContent
                    color:#00E5FD
                    display:inline-block
                    width:vw(100)
                    ellipsis()
        i
            position:relative
            top:25%
        .offSysterm
            line-height:vh(50)
            color:#fff
        div.time
            display:flex
            div
                line-height:vh(45)
            .timeWeek
                display:flex
                justify-content :space-between
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px)    
  .bgColor
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    display:flex
    div:nth-child(1)
      flex:1
    div:nth-child(2)
      flex:1
  .header
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    color:#fff
    cursor: pointer
    display: flex
    justify-content :space-between
    background:url('/data/images/header/top.png') right top no-repeat
    background-size: 100%
    .navs
      display:flex
      margin-left:vw1(41)
      margin-top:vh(48)
      font-size:vw1(15)
      .navItem
        margin-right:vw1(15)
        width: vw1(89)
        height: vh(37)
        line-height: vh(37)
        letter-spacing : vw1(2)
        text-align: center
        background:url("/data/images/header/active.png")  no-repeat
        background-size :100% 100%
      .active
        background:url("/data/images/header/bg.png")  no-repeat
        background-size :100% 100%
    .rightTime
      margin-top:vh(36)
      margin-right: vw1(41)
      font-size:vw1(20)
      span 
        color: #00E5FD
        margin-left:vw1(15)
</style>